<template>
	<view class="container">
		<view class="cu-card panel-user">
			<view class="cu-item">
				<view class="user-title"><text class="txt">{{userInfo.roleTypeName}}登陆</text></view>
				<view class="padding-left padding-right padding-top-xs padding-bottom-sm flex align-center">
					<view class="cu-avatar lg round" 
						style="background-image:url(../../static/def_face.jpg);"></view>
					<view class="margin-left-sm flex-twice text-sm">
						<view>{{userInfo.nickname}}</view>
						<view>{{$utils.dataDesensitization(userInfo.phone)}}</view>
					</view>
					<view class="flex flex-direction">
						<button class="cu-btn sm bg-orange" @click="toMine()">个人中心</button>
						<button class="cu-btn sm margin-top" @click="toLoginChange()">切换账号</button>
					</view>
				</view>
			</view>
		</view>
		<view class="flex bg-white margin-top-sm margin-left margin-right padding-sm radius" v-if="userInfo.roleType == 1">
			<view class="flex-sub text-center">
				<view class="text-sm margin-top-sm">钱包余额</view>
				<view class="text-lg margin-top-sm">{{walletInfo.money}}</view>
			</view>
			<view class="flex-sub text-center">
				<view class="text-sm margin-top-sm">今年收益</view>
				<view class="text-lg margin-top-sm">{{walletInfo.yearIncomeMoney}}</view>
			</view>
			<view class="flex-sub text-right flex align-end justify-end">
				<button class="cu-btn bg-orange sm" @click="toWalletInfo()">个人钱包</button>
			</view>
		</view>
		<view class="flex bg-white margin-top-sm margin-left margin-right padding-sm radius" v-else>
			<view class="flex-sub text-center">
				<view class="text-sm margin-top-sm">钱包余额</view>
				<view class="text-lg margin-top-sm">{{walletInfo.relationWalletMoney}}</view>
			</view>
			<view class="flex-sub text-center">
				<view class="text-sm margin-top-sm">已转出金额</view>
				<view class="text-lg margin-top-sm">{{walletInfo.relationWalletWithdrawnMoney}}</view>
			</view>
			<view class="flex-sub text-right flex align-end justify-end">
				<button class="cu-btn bg-orange sm" @click="toWalletInfo()">个人钱包</button>
			</view>
		</view>
		<view class="cu-card panel-apps margin-top-sm">
			<view class="cu-item">
				<view class="cu-list grid col-4 no-border">
					<view class="cu-item" @click="btnScan()">
					  <view class="icon-tag"><image src="/static/icons/icon_scan.png" mode="aspectFit"></image></view>
					  <text>扫一扫</text>
					</view>
					<view class="cu-item" v-for="(item,index) in appListData" :key="index" @click="$utils.toURL(item.url)">
					  <view class="icon-tag"><image :src="resDomain + item.iconImg" mode="aspectFit"></image></view>
					  <text>{{item.name}}</text>
					</view>
					<!--
					<view class="cu-item">
					  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
					  <text>更多</text>
					</view>
					-->
				</view>
			</view>
		</view>
		<block v-for="(item,index) in userInfo.businessTypes" :key="index">
			<view class="cu-card panel-apps margin-top-sm" v-if="item.businessType == 'CDB'">
				<view class="cu-item">
					<view class="title">充电宝业务</view>
					<view class="cu-list grid col-4 no-border">
						<view class="cu-item" @click="$utils.toURL('/device/cdb/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>充电宝设备</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/device/cdb/online_list')">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>在线设备</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/order/cdb/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_order.png" mode="aspectFit"></image></view>
						  <text>租借订单</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/device/cdb/cost/template')" v-if="item.editFeeState == 2">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>计费模版</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-card panel-apps margin-top-sm" v-if="item.businessType == 'CDCZ'">
				<view class="cu-item">
					<view class="title">充电插座业务</view>
					<view class="cu-list grid col-4 no-border">
						<view class="cu-item" @click="$utils.toURL('/device/cdcz/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>充电插座设备</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/device/cdcz/online_list')">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>在线设备</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/order/cdcz/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_order.png" mode="aspectFit"></image></view>
						  <text>使用订单</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/device/cdcz/cost/template')" v-if="item.editFeeState == 2">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>计费模版</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-card panel-apps margin-top-sm" v-if="item.businessType == 'BXSCN'">
				<view class="cu-item">
					<view class="title">便捷电池自动租借业务</view>
					<view class="cu-list grid col-4 no-border">
						<view class="cu-item" @click="$utils.toURL('/device/bxscn/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>电池充电柜</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/device/bxscn/online_list')">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>在线设备</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/order/bxscn/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_order.png" mode="aspectFit"></image></view>
						  <text>租借订单</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/device/bxscn/cost/template')" v-if="item.editFeeState == 2">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>计费模版</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-card panel-apps margin-top-sm" v-if="item.businessType == 'BXSCNShop'">
				<view class="cu-item">
					<view class="title">便捷电池门店租借业务</view>
					<view class="cu-list grid col-4 no-border">
						<view class="cu-item" @click="$utils.toURL('/device/bxscn/battery/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>便捷电池设备</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/order/bxscn_shop/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_order.png" mode="aspectFit"></image></view>
						  <text>门店租借订单</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/device/bxscn/shop_cost/list')" v-if="item.editFeeState == 2">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>计费模版</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-card panel-apps margin-top-sm" v-if="item.businessType == 'PCL'">
				<view class="cu-item">
					<view class="title">便捷线充业务</view>
					<view class="cu-list grid col-4 no-border">
						<view class="cu-item" @click="$utils.toURL('/device/pcl/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>线充设备</text>
						</view>
						<view class="cu-item" @click="$utils.toURL('/order/pcl/list')">
						  <view class="icon-tag"><image src="/static/icons/icon_order.png" mode="aspectFit"></image></view>
						  <text>使用订单</text>
						</view>
						<!--
						<view class="cu-item" @click="$utils.toURL('/device/bxscn/cost/template')">
						  <view class="icon-tag"><image src="/static/icons/icon_more.png" mode="aspectFit"></image></view>
						  <text>计费模版</text>
						</view>
						-->
					</view>
				</view>
			</view>
		</block>
		<view class="foot"><text class="ftxt">我也是有底线的</text></view>
		
		
		<view class="cu-modal" :class="modalName=='accountList'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white justify-end">
					<view class="content">收款账号</view>
					<view class="action" @click="btnHideModal()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="list-body solid-top margin-bottom">
					<view class="cu-card">
					<scroll-view scroll-y>
						<view class="cu-item padding-sm" v-for="(item,index) in walletInfo.items" :key="index">
							<view class="text-orange">收款账号组：{{item.accountGroupName}}</view>
							<view>余额：{{item.money}}元</view>
						</view>
					</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js'); 
	export default {
		data() {
			return {
				appListData:[],
				walletInfo:{
					money:'0.0',
					totalWithdrawalMoney:'0.0',
					items:[]
				},
				resDomain:this.$store.getters.GET_resDomain,
				userInfo:this.$store.getters.GET_userInfo || {},
				modalName:null
			};
		},
		onLoad(option) {
			console.log(this.userInfo);
			this._loadMyWalletInfo();
			this._loadAppListData();
		},
		onShow(){
			this._jssdk();
		},
		methods:{
			_jssdk(){
				let url = location.href.split('#')[0];
				const api = this.$request;
				api.post(api.url.wxSDK,{
					appId:this.$store.getters.GET_AppId,
					url:url
				},res=>{
					console.log(res)
					if(res.code==200){
						const data = res.body;
						wx.config({
						  debug: false,
						  appId: data.config.appId,        // 必填，公众号的唯一标识
						  timestamp: data.config.timestamp,// 必填，生成签名的时间戳
						  nonceStr: data.config.nonceStr,  // 必填，生成签名的随机串
						  signature: data.config.signature,// 必填，签名
						  jsApiList: ['scanQRCode']        // 必填，需要使用的JS接口列表
						});
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'初始化失败',
							icon:'error'
						})
					}
				})
			},
			//获取功能项
			_loadAppListData:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.funcModelList,{},res=>{
					console.log(res);
					if(res.code == 200){
						const items = res.body.items || [];
						_self.appListData = items;
					}
					_self.$forceUpdate();
				})
			},
			//获取我的钱包信息
			_loadMyWalletInfo:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.myWalletInfo,{},res=>{
					console.log(res);
					if(res.code == 200){
						_self.walletInfo = res.body;
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'获取钱包失败',
							icon:'error'
						})
					}
				})
			},
			btnScan(){
				const _self = this;
				wx.ready(()=>{
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function (res) {
							console.log(res.resultStr);
							$common.toPageByScan(res.resultStr);
						}
					})
				})
			},
			btnHideModal:function(){
				this.modalName = null;
			},
			toWalletInfo:function(){
				uni.navigateTo({
					url:'/pages/mine/wallet/index'
				})
			},
			toMine:function(){
				uni.navigateTo({
					url:'/pages/mine/mine'
				})
			},
			toLoginChange:function(){
				uni.navigateTo({
					url:'/pages/login/change'
				})
			}
		}
	}
</script>

<style lang="less">
.container .panel-apps .cu-item{margin-top:0;margin-bottom:0;}
.container .panel-apps .icon-tag{border-radius:50%;width:86rpx;height:86rpx;margin: 0 auto 5rpx;background-color: #fff6e7;
	display:flex;justify-content:center;align-items:center;}
.container .panel-apps .icon-tag image{width:58rpx;height:58rpx;}
.container .panel-apps .grid>.cu-item text{margin-top:0;font-size:24rpx;}
.container .panel-apps .cu-item .title{padding:15rpx 30rpx 0 30rpx;color:#555555;}
.container .panel-user .cu-item{border-radius:20rpx;margin-bottom:0;}
.container .panel-user .cu-item .flex-twice view{padding-top:5rpx;}
.user-title{
	background-color: white;
	color: white;
	font-size: 20rpx;
	position: relative;
	&::before{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 80%;
		height: 20%;
		background-color: #ed6a3e;
	}
	.txt{
		display: inline-block;
		width: 20%;
		text-align: center;
		padding:10rpx 0;
		background: linear-gradient(160deg,#fa9454,#e65332);
		border-radius: 20rpx 0 20rpx 0;
		position: relative;
		&::before,&::after{
			content: "";
			display: block;
			position: absolute;
			right: -20rpx;
			width: 20rpx;
		}
		&::before{
			top: 20%;
			height: 20rpx;
			background-color: #ed6a3e;
			z-index: 100;
		}
		&::after{
			bottom: 0;
			height: 80%;
			background-color: white;
			border-radius: 20rpx 0 0 0;
			z-index: 200;
		}
	}
}
</style>
